<template>
  <div class="goods-item" @click="to_good">
    <toast ref="toast" />
    <div class="img">
     <img :src="good.img" alt="">
    </div>
    <div class="text">
     <div class="left">
       <p>{{good.goodname}}</p>
       <!-- <p>用户名</p> -->
       <p class="price"><span>￥</span>{{good.price}}</p>
     </div>
     <div class="right">
       <img src="../../assets/img/Mall/icon/热度.svg" alt="">
       <span>{{good.click}}</span>
     </div>
    </div>
  </div>
</template>

<script>
import Toast from '../../components/Toast/Toast.vue'

export default {
  components: { Toast },
  name: '',
  props:{
   good:{
    type:Object,
    default(){
     return {}
    }
   }
  },
  data () {
    return {
      
    }
  },
  computed:{
    isLogin(){
       return this.$store.getters.isLogin
    }
  },
  methods:{
  to_good(){
    if(!this.isLogin){
      let msg = '登录后可查看商品'
      let color = 'DarkOrange'
      this.$refs.toast.show(msg,color)
      return 
    } else{
      let gid = this.good.gid
    this.$router.push('/good/' + gid)
    }
    
  }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.goods-item{
  margin-top: 5px;
 margin-left: 5px;
 width: 48%;
 height: 58%;
 border: .5px solid #999;
 border-radius: 10px;
 overflow: hidden;
}
.img{
 width: 180px;
 height: 180px;
}
.img img{
 width: 100%;
 height: 100%;
 border-radius: 4px;
}
.goods-item p{
  overflow: hidden;
  text-overflow: ellipsis;
 padding: 5px;
 font-size: 14px;
}
.text{
 display: flex;
}
.text div{
 flex: 1;
}
.icon{
 font-size: 14px;
 color: orangered;
}
.price{
 font-size: 2px;
 color: orangered;
}
.name{
 color: rgb(238, 95, 162);
 font-size: 14px;
 text-align: center;
 line-height: 24px;
}
</style>
